<template>
  <div class="appointment-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>预约</el-breadcrumb-item>
      <el-breadcrumb-item>体检预约</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 两个按钮 -->
    <div style="margin-top: 20px; margin-bottom: 20px">
      <el-button type="primary" round @click="handleReservation">预约</el-button>
      <el-button type="primary" round @click="handleClear">清空</el-button>
    </div>

    <!-- 基本信息 -->
    <div>
      <el-descriptions class="margin-top" title="基本信息" :column="3" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Tickets />
              </el-icon>
              体检单号
            </div>
          </template>
          <el-input v-model="form.examOrderId" placeholder="20231008990202120" disabled />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <User />
              </el-icon>
              姓名
            </div>
          </template>
          <el-input v-model="form.name" placeholder="输入姓名" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Female />
              </el-icon>
              性别
            </div>
          </template>
          <el-select v-model="form.gender" class="m-2" placeholder="选择性别">
            <el-option v-for="item in genderOptions" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Phone />
              </el-icon>
              手机号
            </div>
          </template>
          <el-input v-model="form.phone" placeholder="输入手机号" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Calendar />
              </el-icon>
              出生日期
            </div>
          </template>
          <el-date-picker v-model="form.birthday" type="date" placeholder="Pick a day" size="default" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Postcard />
              </el-icon>
              身份证号
            </div>
          </template>
          <el-input v-model="form.cardNumber" placeholder="输入身份证号码" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Location />
              </el-icon>
              家庭住址
            </div>
          </template>
          <el-input v-model="form.address" placeholder="输入通讯地址" />
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 预约信息 -->
    <div style="margin-top: 20px;">
      <el-descriptions class="margin-top" title="预约信息" :column="1" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Location />
              </el-icon>
              预约院区
            </div>
          </template>
          <el-select v-model="form.yuanqu" class="m-2" placeholder="选择院区地址">
            <el-option
              v-for="item in yuanquOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <Document />
              </el-icon>
              院区描述
            </div>
          </template>
          <div class="yuanqu-info">
            <p>营业时间： 周一至周六 7:30-11:30</p>
            <p>采血截止：10:30</p>
            <p>联系电话：4006297568</p>
          </div>
          地址：沈阳市浑南区创新路175号（智慧大街交互处）
        </el-descriptions-item>
      </el-descriptions>

      <!-- 预约详情 -->
      <div style="margin-top: 20px;">
        <el-descriptions class="margin-top" title="预约详情" :column="3" size="default" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Notification />
                </el-icon>
                预约类型
              </div>
            </template>
            <el-select v-model="form.yuyuetype" class="m-2" placeholder="预约类型">
              <el-option
                v-for="item in yuyuetypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Notification />
                </el-icon>
                预约套餐
              </div>
            </template>
            <el-select v-model="form.yuyuetaocao" class="m-2" placeholder="预约套餐">
              <el-option v-for="item in yuyuetaocaoOptions" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Star />
                </el-icon>
                体检时间
              </div>
            </template>
            <el-date-picker v-model="form.yuyuedate" type="date" placeholder="Pick a day" size="default" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Star />
                </el-icon>
                体检时段
              </div>
            </template>
            <el-select v-model="form.tijianshiduan" class="m-2" placeholder="体检时段">
              <el-option v-for="item in tijianshiduanOptions" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <User />
                </el-icon>
                套餐价格
              </div>
            </template>
            <el-input v-model="form.packagePrice" placeholder="1500" :disabled="true" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <User />
                </el-icon>
                优惠补贴
              </div>
            </template>
            <el-input v-model="form.discount" placeholder="400" disabled />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <User />
                </el-icon>
                结算金额
              </div>
            </template>
            <el-input v-model="form.settlementAmount" placeholder="1100" disabled />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <User />
                </el-icon>
                结算类别
              </div>
            </template>
            <el-select v-model="form.jiesuanliebie" class="m-2" placeholder="结算类别">
              <el-option
                v-for="item in jiesuanliebieOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 套餐详情 -->
      <div style="margin-top: 20px;">
        <el-descriptions title="套餐详情" direction="vertical" :column="4" size="default" border>
          <!-- 第一行-->
          <el-descriptions-item label="检查项目">肺部CT</el-descriptions-item>
          <el-descriptions-item label="检查内容">CT检查【肺部-平扫】</el-descriptions-item>
          <el-descriptions-item label="检查意义" :span="2">
            用于检查肺部有无良性恶性肿瘤，结核，炎症和间质性，弥漫性病变等。
          </el-descriptions-item>
          <!-- 第二行-->
          <el-descriptions-item label="检查项目">头部CT</el-descriptions-item>
          <el-descriptions-item label="检查内容">头颅骨CT</el-descriptions-item>
          <el-descriptions-item label="检查意义" :span="2">
            CT检查头部影像，用于检查颅内有无出血、肿瘤、梗塞等病变
          </el-descriptions-item>

          <!-- 第三行-->
          <el-descriptions-item label="检查项目" :span="1">肿瘤两项</el-descriptions-item>
          <el-descriptions-item label="检查内容" :span="1">癌胚抗原测定（定量）,甲胎蛋白测定</el-descriptions-item>
          <el-descriptions-item label="检查意义" :span="2">
            癌胚抗原：系广谱性肿瘤标志物，对大肠癌、胰腺癌的筛查、疗效观察和预后评估有重要的临床意义。<br>
            在胃、乳腺、肺癌等也可升高。 甲胎蛋白：对原发性肝癌的诊断、疗效观察和预后评估有重要的临床意义。<br>
            在卵巢、胃、胰腺癌、睾丸癌等肿瘤及肝炎、肝硬化等疾病也有异常发现。孕期可出现升高。
          </el-descriptions-item>

          <!-- 第四行-->
          <el-descriptions-item label="检查项目" :span="1">C13呼气试验</el-descriptions-item>
          <el-descriptions-item label="检查内容" :span="1">C13呼气试验</el-descriptions-item>
          <el-descriptions-item label="检查意义" :span="2">
            空腹 ，一个月以内使用过抗生素和胃药者不宜做此检查。<br>
            13碳-尿素呼气试验阳性示有幽门螺杆菌感染，它与胃部炎症、消化性溃疡、胃癌的发生密切关联。
          </el-descriptions-item>

          <!-- 第五行-->
          <el-descriptions-item label="检查项目" :span="1">甲功三项</el-descriptions-item>
          <el-descriptions-item label="检查内容" :span="1">血清游离甲状腺素测定</el-descriptions-item>
          <el-descriptions-item label="检查意义" :span="2">
            判断甲状腺功能，鉴别免疫性疾病
          </el-descriptions-item>

          <!-- 第六行-->
          <el-descriptions-item label="检查项目" :span="1">颈动脉彩超</el-descriptions-item>
          <el-descriptions-item label="检查内容" :span="1">彩色多普勒超声检查【颈动脉】</el-descriptions-item>
          <el-descriptions-item label="检查意义" :span="2">
            通过彩色超声仪器采用无创性检查方法，检测颈动脉结构和动脉粥样硬化斑形态、范围、性质、动脉狭窄程度等；<br>
            早期发现动脉血管病变，为有效预防和减少冠心病、缺血性脑血管病等心脑血管疾病发病提供客观的血流动力学依据。
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import {
  Tickets,
  User,
  Female,
  Phone,
  Calendar,
  Postcard,
  Location,
  Document,
  Notification,
  Star
} from '@element-plus/icons-vue'

const iconStyle = {
  width: '1em',
  height: '1em',
  marginRight: '5px'
}

const form = reactive({
  examOrderId: '20231008990202120',
  name: '',
  gender: '',
  phone: '',
  birthday: '',
  cardNumber: '',
  address: '',
  yuanqu: '',
  yuyuetype: '',
  yuyuetaocao: '',
  yuyuedate: '',
  tijianshiduan: '',
  packagePrice: '1500',
  discount: '400',
  settlementAmount: '1100',
  jiesuanliebie: ''
})

const genderOptions = [
  { value: 'boy', label: '男士' },
  { value: 'women', label: '已婚女士' },
  { value: 'girl', label: '未婚女士' }
]

const yuanquOptions = [
  { value: 'hunnan', label: '沈阳熙康云医院-浑南院区' },
  { value: 'sanhao', label: '沈阳熙康云医院-三好街院区' },
  { value: 'shijidasha', label: '沈阳熙康云医院-世纪大厦' }
]

const yuyuetypeOptions = [
  { value: 'tuantiyuyue', label: '团体预约' },
  { value: 'tijianyuyue', label: '个检预约' }
]

const yuyuetaocaoOptions = [
  { value: 'taocanA', label: '23东软家属已婚女士套餐A' },
  { value: 'taocanB', label: '23东软家属已婚女士套餐B' },
  { value: 'taocanC', label: '23东软家属已婚女士套餐C' },
  { value: 'taocanD', label: '23东软家属已婚女士套餐D' }
]

const tijianshiduanOptions = [
  { value: 'am', label: '上午' },
  { value: 'pm', label: '下午' }
]

const jiesuanliebieOptions = [
  { value: 'zhifubao', label: '支付宝' },
  { value: 'wechat', label: '微信' },
  { value: 'yibao', label: '医保' },
  { value: 'xianjian', label: '现金' },
  { value: 'yinhangka', label: '银行卡' }
]

const handleReservation = () => {
  console.log('执行预约逻辑', form)
  // 在这里添加实际的预约提交逻辑
}

const handleClear = () => {
  console.log('执行清空逻辑')
  // 清空表单数据
  Object.keys(form).forEach(key => {
    if (key !== 'examOrderId' && key !== 'packagePrice' && key !== 'discount' && key !== 'settlementAmount') {
      form[key] = ''
    }
  })
}

</script>

<style scoped>
.appointment-container {
  padding: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}
</style>